
<template>
    <div>
        <el-form ref="ruleFormRef" :model="data" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
            status-icon>

            <el-form-item v-for="item in configs" :label="item.label" :prop="item.key">
                <el-input v-if="item.type === 'input'" v-model="data[item.key]" />
                <div v-else>{{ data[item.key] }}</div>
            </el-form-item>

            <!-- 下拉框 -->
        <!-- <el-form-item label="Activity count" prop="count">
                <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
                                            </el-form-item> -->

            <!-- 日期 -->
            <!-- 时间 -->
        <!-- <el-form-item label="Activity time" required>
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker v-model="ruleForm.date1" type="date" label="Pick a date" placeholder="Pick a date"
                            style="width: 100%" />
                    </el-form-item>
                </el-col>
                <el-col class="text-center" :span="2">
                    <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-time-picker v-model="ruleForm.date2" label="Pick a time" placeholder="Pick a time"
                            style="width: 100%" />
                    </el-form-item>
                </el-col>
                                            </el-form-item> -->
            <!-- 开关 -->
        <!-- <el-form-item label="Instant delivery" prop="delivery">
                <el-switch v-model="ruleForm.delivery" />
                                            </el-form-item> -->
            <!-- 复选框 -->
        <!-- <el-form-item label="Activity type" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="Online activities" name="type" />
                    <el-checkbox label="Promotion activities" name="type" />
                    <el-checkbox label="Offline activities" name="type" />
                    <el-checkbox label="Simple brand exposure" name="type" />
                </el-checkbox-group>
                                            </el-form-item> -->
            <!-- 单选 -->
        <!-- <el-form-item label="Resources" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="Sponsorship" />
                    <el-radio label="Venue" />
                </el-radio-group>
                                            </el-form-item> -->
            <!-- 富文本 -->
        <!-- <el-form-item label="Activity form" prop="desc">
                <el-input v-model="ruleForm.desc" type="textarea" />
                                            </el-form-item> -->
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
defineOptions({
    name: 'SForm',
})
const props = defineProps({
    bar: {
        type: Number,
        required: true
    },
    rules: {
        type: Object,
        required: true
    },
    data: {
        type: Object,
        required: true
    },
    configs: {
        type: Array<any>,
        required: true
    },
    pageNum: {
        type: Number,
        default: 1
    },
    pageSize: {
        type: Number,
        default: 10
    },
    showSizeChanger: {
        type: Boolean,
        default: true
    },
    size: {
        type: String,
        default: 'default'
    },
    /**
     * alert: {
     *   show: true,
     *   clear: Function
     * }
     */
    alert: {
        type: [Object, Boolean],
        default: null
    },
    rowSelection: {
        type: Object,
        default: null
    },
    /** @Deprecated */
    showAlertInfo: {
        type: Boolean,
        default: false
    },
    showPagination: {
        type: String,
        default: 'auto'
    },
    /**
     * enable page URI mode
     *
     * e.g:
     * /users/1
     * /users/2
     * /users/3?queryParam=test
     * ...
     */
    pageURI: {
        type: Boolean,
        default: false
    }
})

onMounted(() => {
    console.log(`the component is now mounted.`, props)
})

const formSize: any = ref('default')
const ruleFormRef = ref<FormInstance>()


const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

</script>

<style scoped></style>